<template>
  <el-table
    id="refTable"
    ref="refTable"
    :header-cell-style="{
      height: '54px',
      padding: '0',
      background: '#f5f9ff',
      'font-size': '14px',
      color: '#333',
    }"
    :row-style="{
      'font-size': '14px',
      color: '#333',
      'font-weight': 400,
    }"
    stripe
    border
    size="small"
    v-bind="$attrs"
    :height="height"
    :data="tableData"
  >
    <template v-for="(item, index) in props.columns" :key="index">
      <template v-if="item.label !== '操作'">
        <el-table-column align="center" show-overflow-tooltip v-bind="item" />
      </template>
      <template v-else>
        <el-table-column align="center" show-overflow-tooltip v-bind="item">
          <template v-if="item.label === '操作'" #default="scope">
            <slot name="default" :row="scope.row" />
          </template>
        </el-table-column>
      </template>
    </template>
    <template #empty>
      <el-image :src="empty" fit="fill"></el-image>
    </template>
  </el-table>
  <el-pagination
    v-bind="props.options"
    v-model:currentPage="opts.PagedIndex"
    v-model:page-size="opts.PageSize"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>

<script setup lang="ts">
import empty from '@/assets/images/empty.png'
import service from '@/utils/http/service'
// import { IProps } from './types'
type Columns = {
  label: string | number
  value: string | number
  [key: string]: any
}
type Options = {
  total?: number
  layout?: string
  pageSizes?: number[]
  [key: string]: any
}
interface IProps {
  apiUrl: string
  apiParams: object
  // columns: Columns[]
  columns: any
  pagingMode?: 'server' | 'local' //前端分页
  // apiMethod?: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'get' | 'post' | 'put' | 'delete'
  apiMethod?: 'GET' | 'POST'
  options?: any
  [key: string]: any
}
const props = withDefaults(defineProps<IProps>(), {
  pagingMode: 'server',
  apiMethod: 'GET',
  options: {
    total: 1,
    layout: 'total, sizes, prev, pager, next, jumper',
    pageSizes: [10, 20, 50],
    background: true,
    small: true,
  },
})

// 设置默认值
const newProps = computed(() => {
  let props = defineProps<IProps>()
  let res = Object.assign(
    {
      pagingMode: 'server',
      apiMethod: 'GET',
      options: {
        total: 1,
        layout: 'total, sizes, prev, pager, next, jumper',
        pageSizes: [10, 20, 50],
        background: true,
        small: true,
      },
    },
    props
  )
  return res
})

const obj = reactive({
  allData: [],
  tableData: [],
  height: 0,
  opts: {
    PagedIndex: 1,
    PagedSize: 20,
  },
})
type ObjType = {
  name: string
}
const objType = reactive<ObjType>({
  name: '',
})

type Keys = 'A' | 'B' | 'C'
const result: Record<Keys, number> = {
  A: 1,
  B: 1,
  C: 1,
}

// 分页相关 新每页条数
const handleSizeChange = (val: number) => {
  obj.opts.PagedSize = val
  const { pagingMode } = props
  pagingMode === 'server' ? handleGetList() : handleLocal()
}
// 分页相关 新当前页
const handleCurrentChange = (val: number) => {
  obj.opts.PagedIndex = val
  const { pagingMode } = props
  pagingMode === 'server' ? handleGetList() : handleLocal()
}
// 分页相关 前端分页
const handleLocal = () => {
  let { PagedIndex, PagedSize } = obj.opts
  let { total } = props.options
  let start = (PagedIndex - 1) * PagedSize
  let end = total <= PagedIndex * PagedSize ? total : PagedIndex * PagedSize
  obj.tableData = obj.allData.slice(start, end)
}
// table相关 API请求
const fnGetList = (url: string, params: object, method: 'GET' | 'POST') => {
  // 只处理了 GET
  return new Promise((resolve, reject) => {
    service({ url, method, params })
      .then((res) => {
        resolve(res)
      })
      .catch((err) => {
        reject(err)
      })
  })
}
// table相关 设置表格数据
const handleGetList = () => {
  const { apiUrl, apiParams, pagingMode, apiMethod } = props
  let cell =
    pagingMode === 'server'
      ? obj.opts
      : {
          PagedIndex: 1,
          PagedSize: 10000,
        }
  let params = Object.assign(apiParams, cell)
  fnGetList(apiUrl, params, apiMethod).then((res: any) => {
    // console.log('res', res)
    let { rows, total } = res
    if (pagingMode === 'server') {
      obj.tableData = rows
      props.options.total = total
    } else {
      obj.allData = rows
      props.options.total = rows.length
      handleCurrentChange(1)
    }
  })
}
// 计算高度
const calcHeight = () => {
  const ins = getCurrentInstance()
  if (typeof ins === null) return
  let proxy = ins && ins.proxy
  let offsetTop = (proxy as any).$refs.refTable.$el.offsetTop
  let height = window.innerHeight - offsetTop - 80
  // console.log('offsetTop', offsetTop, height)
  obj.height = height
}
const { tableData, opts, height } = toRefs(obj)
onMounted(() => {
  handleGetList()
  calcHeight()
})
defineExpose({
  handleGetList,
})
</script>

<style scoped></style>
